<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>-->
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>

    <title>element-ui</title>
    <style>

    </style>
</head>
<body class="skin-default">
<div id="app" class="element-app-box">
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <el-form :inline="true"><!--:model="formInline"-->
                    <el-form-item label="Approved by">
                        <el-input v-model="searchParam.user" placeholder="Approved by"></el-input>
                    </el-form-item>
                    <el-form-item label="Activity zone">
                        <el-select v-model="searchParam.region" placeholder="Activity zone">
                            <el-option label="Zone one" value="shanghai"></el-option>
                            <el-option label="Zone two" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="toSearch">Query</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <el-button>Default</el-button>
                <el-button type="primary">Primary</el-button>
                <el-button type="success">Success</el-button>
                <el-button type="info">Info</el-button>
                <el-button type="warning">Warning</el-button>
                <el-button type="danger">Danger</el-button>
                <el-button>中文</el-button>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="15">
        <el-col :span="24">
            <div class="grid-content">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="date" label="Date" width="180" ></el-table-column>
                    <el-table-column prop="name" label="Name" width="180" ></el-table-column>
                    <el-table-column prop="address" label="Address"></el-table-column>
                </el-table>
            </div>
        </el-col>
    </el-row>
</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<script src="/static/plugin/layer/layer.js"></script>
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script type="text/javascript">
    const app = Vue.createApp({
        data: function () {
            return {
                searchParam: {
                    user: '123'
                    , region: ''
                }
                , tableData: [
                    {
                        date: '2016-05-03',
                        name: 'Tom',
                        address: '11No. 189, Grove St, Los Angeles',
                    }
                ]
            }
        }
        , computed: {

        }
        , methods: {
            toSearch() {
                console.info('toSearch');
            }
        }
        , mounted() {

        }
        , setup() {

        }
    });
    app.use(ElementPlus, {});
    var appVM = app.mount("#app");
</script>

</body>
</html>
